<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态页面</title>
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper.min.js"></script>
    <script src="js/index.js" type="text/javascript"></script>
</head>

<body>
    <!-- logo部分 -->
    <div class="log">
        <div class="shopping">分类</div>
        <img src="img/decathlon-logo-chine.svg">
        <div class="sbmi">
            <input type="text" value="">
            <div class="shus">搜索</div>
        </div>
        <div class="log-on">帮助</div>
        <div class="log-on">门店</div>
        <div class="log-on">账户</div>
        <div class="log-one">购物车</div>
    </div>
    <!-- logo结束 -->
    <!-- nav开始-->
    <div class="nav">
        <div class="navlo">
            <span>所有运动</span>
            <div class="span-nav">
                <ul>
                    <li><a href="#">户外一日游</a></li>
                    <li><a href="#">户外儿童有游</a></li>
                    <li><a href="#">户外多日游</a></li>
                    <li><a href="#">户外露营</a></li>
                    <li><a href="#">高尔夫运动</a></li>
                    <li><a href="#">篮球足球比拼</a></li>
                </ul>
            </div>
        </div>
        <ul class="nav-ul">
            <li><a href="#">男士</a></li>
            <li><a href="#">女士</a></li>
            <li><a href="#">青少年</a></li>
            <li><a href="#">热门推荐</a></li>
        </ul>
        <div class="nav-qita">
            <div><a href="#">关注店铺</a></div>
            <div><a href="#">关于其他</a></div>
            <div><a href="#">帮助中心</a></div>
        </div>

    </div>
    <div class="tu">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="img/zhu.jpg" alt=""></div>
                <div class="swiper-slide"><img src="img/zhu.jpg" alt=""></div>
                <div class="swiper-slide"><img src="img/zhu.jpg" alt=""></div>
                <div class="swiper-slide"><img src="img/zhu.jpg" alt=""></div>
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
        </div>

        <!-- <ul class="tupp">
            <li><img src="img/zhu.jpg"></li>
            <li><img src="img/zhu.jpg"></li>
            <li><img src="img/zhu.jpg"></li>
        </ul>
        <div class="zuo"><</div>
        <div class="you">></div>
        <ul class='xiaoli'></ul> -->
    </div>
    <div class="content">
        <div class="content-por">
            <h1>男士分类</h1>
            <div class="kuai"><a href="#">夹克/防水</a></div>
            <div class="kuai"><a href="#">夹克/外套</a></div>
            <div class="kuai"><a href="#">羽绒服</a></div>
            <div class="kuai"><a href="#">运动短裤</a></div>
            <div class="kuai"><a href="#">紧身衣</a></div>
            <div class="kuai"><a href="#">运动鞋</a></div>
            <div class="kuai-m"><a href="#">短袖</a></div>
            <div class="kuai-m"><a href="#">短裤</a></div>
            <div class="kuai-m"><a href="#">紧身裤</a></div>
            <div class="kuai-m"><a href="#">徒步鞋</a></div>
        </div>
        <div class="content-por">
            <h1>女士分类</h1>
            <div class="kuai"><a href="#">运动内衣</a></div>
            <div class="kuai"><a href="#">夹克/外套</a></div>
            <div class="kuai"><a href="#">羽绒服</a></div>
            <div class="kuai"><a href="#">运动长裤</a></div>
            <div class="kuai"><a href="#">防水夹克</a></div>
            <div class="kuai"><a href="#">运动鞋</a></div>
            <div class="kuai-m"><a href="#">短袖</a></div>
            <div class="kuai-m"><a href="#">短裤</a></div>
            <div class="kuai-m"><a href="#">紧身裤</a></div>
            <div class="kuai-m"><a href="#">徒步鞋</a></div>
        </div>
        <div class="content-por">
            <h1>儿童分类</h1>
            <div class="kuai"><a href="#">棉服</a></div>
            <div class="kuai"><a href="#">卫衣</a></div>
            <div class="kuai"><a href="#">套装</a></div>
            <div class="kuai"><a href="#">长裤</a></div>
            <div class="kuai"><a href="#">雪地靴</a></div>
            <div class="kuai"><a href="#">运动鞋</a></div>
            <div class="kuai-m"><a href="#">平衡车</a></div>
            <div class="kuai-m"><a href="#">滑板车</a></div>
            <div class="kuai-m"><a href="#">学步鞋</a></div>
            <div class="kuai-m"><a href="#">小白鞋</a></div>
        </div>
    </div>
    <div class="lastnav">
        <div><img src="img/TB2I7KtyohnpuFjSZFpXXcpuXXa_!!352469034.png" alt="">
            <p> <a href="#">快速进入</a></p>
        </div>
        <div><img src="img/TB2kt2iubplpuFjSspiXXcdfFXa_!!352469034.png" alt="">
            <p><a href="#">快速进入</a></p>
        </div>
        <div><img src="img/TB2vN1Vyd0opuFjSZFxXXaDNVXa_!!352469034.png" alt="">
            <p><a href="#">快速进入</a></p>
        </div>
    </div>
    <div class="fjian"></div>
    <div class="the-end">
        <div class="end-logo"><img src="img/logo1.PNG" alt=""></div>
        <div class="end-nav">
            <div class="nav">关注店铺</div>
            <div class="nav">关于迪卡龙</div>
            <div class="nav">帮助中心</div>
        </div>
        <div class="end-content"></div>
    </div>
</body>
<script>
    var swiper = new Swiper('.swiper-container', {
        loop: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination',
        },
    });
</script>

</html>